<template>
    <div>
        <mark
                style="position:fixed;top:0;bottom:0;left:0;right:0;background:rgba(0,0,0,0);z-index:999;"
                v-show="showSeason"
                @click.stop="showSeason=false"
        ></mark>
        <el-input placeholder="请选择季度" v-model="showValue" :style="{width: width}" @focus="showSeason=true" clearable>
            <i slot="prefix" class="el-input__icon el-icon-date"></i>
        </el-input>
        <el-card
                class="box-card"
                style="width:322px;padding: 0 3px 20px;margin-top:10px;position:fixed;z-index:9999"
                v-show="showSeason"
        >
            <div slot="header" class="clearfix" style="text-align:center;padding:0">
                <button
                        type="button"
                        aria-label="前一年"
                        class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left"
                        @click="prev"
                ></button>
                <span role="button" class="el-date-picker__header-label">{{year}}年</span>
                <button
                        type="button"
                        aria-label="后一年"
                        @click="next"
                        class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right"
                ></button>
            </div>
            <div class="text item" style="text-align:center;">
                <el-button
                        type="text"
                        size="medium"
                        style="width:40%;color: #606266;float:left;"
                        @click="selectSeason(0)"
                >第一季度</el-button>
                <el-button
                        type="text"
                        size="medium"
                        style="float:right;width:40%;color: #606266;"
                        @click="selectSeason(1)"
                >第二季度</el-button>
            </div>
            <div class="text item" style="text-align:center;">
                <el-button
                        type="text"
                        size="medium"
                        style="width:40%;color: #606266;float:left;"
                        @click="selectSeason(2)"
                >第三季度</el-button>
                <el-button
                        type="text"
                        size="medium"
                        style="float:right;width:40%;color: #606266;"
                        @click="selectSeason(3)"
                >第四季度</el-button>
            </div>
        </el-card>
    </div>
</template>
<script>
    import moment from 'moment';
    export default {
        name:"DatePickerSeason",
        props: {
            valueArr: {
                default: () => {
                    return ['01-03', '04-06', '07-09', '10-12']
                },
                type: Array
            },
            value:{
              type:Array,
              default:function () {
                return []
              }
            },
            width:{
                type:String,
                default:"220px"
            }
        },
        data() {
            return {
                showSeason: false,
                season: '',
                year: new Date().getFullYear(),
                showValue: ''
            }
        },
        methods:{
            one() {
                this.showSeason = false
            },
            prev() {
                this.year = this.year * 1 - 1
            },
            next() {
                this.year = this.year * 1 + 1
            },
            selectSeason(i) {
                let that = this
                that.season = i + 1
                let arr = that.valueArr[i].split('-')
                this.currBegin = moment(new Date(that.year +"-"+ arr[0])).startOf('month').format("YYYY-MM-DD")   //季度第一天
                this.currEnd = moment(new Date(that.year +"-"+  arr[1])).endOf('month').format("YYYY-MM-DD")     //季度最后一天
                that.defaultValue=[this.currBegin,this.currEnd]

                that.showSeason = false
                this.showValue = `${this.year}年${this.season}季度`
                // if(this.season == 1){
                //     this.currLegendTime = moment().month(moment().month()).startOf('month').format('YYYY')
                //     this.currBegin = moment(new Date('2020-01')).startOf('month').format("YYYY-MM-DD")   //季度第一天
                //     this.currEnd = moment(new Date('2020-03')).startOf('month').format("YYYY-MM-DD")     //季度最后一天
                //     this.historyBegin = moment(new Date(this.year+'-1')).startOf('month').format("YYYY-MM-DD")  //历史第一天
                //     this.historyEnd = moment(new Date(this.year+'-3')).endOf('month').format("YYYY-MM-DD")
                // }
            },
        },
        computed:{
            defaultValue:{
                get(){
                    return this.value
                },
                set(v){
                    this.$emit("input",v)
                }
            }
        },
        watch: {
            defaultValue: function(value, oldValue) {
                if (value.length>0) {
                    this.year = value[0].slice(0, 4)
                    let str = value[0].slice(5, 7) + '-'+value[1].slice(5, 7)
                    let arrAll = this.valueArr
                    this.showValue = `${this.year}年${arrAll.indexOf(str) + 1}季度`
                }else{
                    this.showValue=""
                }
            },
            showValue:function (value) {
                if(!value){
                    this.defaultValue = undefined
                }
            }
        },
        created() {
            if (this.defaultValue.length>0) {
                let value = this.defaultValue
                this.year = value[0].slice(0, 4)
                let str = value[0].slice(5, 7) + '-'+value[1].slice(5, 7)
                let arrAll = this.valueArr
                this.showValue = `${this.year}年${arrAll.indexOf(str) + 1}季度`
            }
        },
    }
</script>
